<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>Hello World!</title>
  <script src="../Build/CesiumUnminified/Cesium.js"></script>
  <style>
    /* @import url(./Build/CesiumUnminified//Widgets/widgets.css); */
    @import url(../Build/CesiumUnminified/Widgets/widgets.css);

    html,
    body,
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    .canvas {
      position: absolute;
      left: 10px;
      top: 10px;
      display: none;
    }

    #canvas-a {
      top: 10px;
    }

    #canvas-b {
      top: 120px;
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <canvas id="canvas-img"></canvas>
  <canvas id="canvas-a" class="canvas" width="700" height="100"></canvas>
  <canvas id="canvas-b" class="canvas" width="700" height="100"></canvas>
  <!-- <img src="./images/cesium.png" alt=""> -->
  <!-- <img src="./arrow.png" alt=""> -->
  <script>
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJmNWY1NTNiZC0yOWZjLTQxYTEtYmFmZS0zZDhhOWRmMmMyM2YiLCJpZCI6MTM2MDIyLCJpYXQiOjE2ODI2NzE3NjR9.iCrukqqU__ODBrOwYgkTzv2fyg_yAli8GyePHhjgiFc';

    let viewer = new Cesium.Viewer('cesiumContainer', {
      baseLayerPicker: true
    })

    viewer.entities.add({
      position: Cesium.Cartesian3.fromDegrees(104.303854, 24.871046, 0.0),
      label: {
        text: 'cesium',
        font: '30px',
        fillColor: Cesium.Color.WHITE,
        backgroundColor: Cesium.Color.AQUA,
        // 是否显示背景颜色
        showBackground: false,
        // 字体边框
        outline: true,
        // 字体边框颜色
        outlineColor: Cesium.Color.WHITE,
        // 字体边框尺寸
        outlineWidth: 10,
        // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
        scale: 1.0,
        // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        // 相对于坐标的水平位置
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(10, 0),
        // 显示在距相机的距离处的属性，多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
        // 是否显示
        show: true
      },
      billboard: {
        // 图像地址，URI或Canvas的属性
        image: './images/cesium.png',
        // 设置颜色和透明度
        color: Cesium.Color.WHITE.withAlpha(0.8),
        // 高度（以像素为单位）
        // height: 30,
        // 宽度（以像素为单位）
        // width: 118,
        // 逆时针旋转
        // rotation: 20,
        // 大小是否以米为单位
        sizeInMeters: false,
        // 相对于坐标的垂直位置
        verticalOrigin: Cesium.VerticalOrigin.CENTER,
        // 相对于坐标的水平位置
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
        pixelOffset: new Cesium.Cartesian2(10, 0),
        // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
        scale: 1.0,
        // 显示在距相机的距离处的属性，多少区间内是可以显示的
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1500),
        // 是否显示
        show: true
      }
    })


    viewer.zoomTo(viewer.entities)
  </script>
</body>

</html>